<%@ page pageEncoding="utf-8" %>
<%@include file="/commons/taglibs.jsp" %>
<!DOCTYPE html>
<html>
<fmt:bundle basename="res">
<head>
    <meta charset="utf-8">
    <title><fmt:message key='ttbl' /></title>
    <jsp:include page="/WEB-INF/commons/commons-header.jsp" flush="true"/>
    <style>
        html {
            background: #fff;
        }
    </style>
</head>

<body>
<div class="layui-container">
    <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list" style="padding: 20px 30px 0 0;">

        <form:form commandName="coupon" method="${_method }" class="layui-form" id="form">
            <input type="hidden" name="_method" value="${_method }"/>
            <form:hidden path="id"/>
            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='yhjlx' /></label>
                <div class="layui-input-block">
                    <input type="radio" name="type" lay-filter="type" lay-verify="required" value="1" title="<fmt:message key='mjj' />" <c:if test="${coupon.type eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="type" lay-filter="type" lay-verify="required" value="2" title="<fmt:message key='zpj' />" <c:if test="${coupon.type eq 2}">checked="checked"</c:if>/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='yhjfl' /></label>
                <div class="layui-input-block">
                    <c:if test="${_method eq 'POST'}">
                        <c:forEach items="${channels}" var="channel">
                            <input type='checkbox' name="channels" lay-filter='feijin-channel-checkbox' value='${channel.id}' title='${channel.name}'/>
                        </c:forEach>
                    </c:if>

                    <c:if test="${_method eq 'PUT'}">
                        <c:forEach items="${channels}" var="channel">
                            <input type='checkbox' name='channels' lay-filter='feijin-channel-checkbox'
                                   <c:if test="${fn:contains(channelNames, channel.name)}">checked="checked"</c:if> value='${channel.id}' title='${channel.name}'/>
                        </c:forEach>
                    </c:if>

                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='yhjmc' /></label>
                <div class="layui-input-block">
                    <form:input path="name" class="layui-input" lay-verify="required" placeholder="<fmt:message key='yhjmc' />" style="width: 200px;"/>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='mkje' /></label>
                <div class="layui-input-block">
                    <form:input path="conditionAmount" class="layui-input" lay-verify="required" placeholder="<fmt:message key='mkje' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item feijin-manjian-area" style="display:none;">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='yhjmz' /></label>
                <div class="layui-input-block">
                    <form:input path="denominationAmount" class="layui-input" lay-verify="required" placeholder="<fmt:message key='mkje' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><b style="color:red">*</b> <fmt:message key='ffsl' /></label>
                <div class="layui-input-block">
                    <form:input path="releasedQuantity" class="layui-input" lay-verify="required" placeholder="<fmt:message key='ffsl' />" style="width: 200px;"/>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='yhjyxq' /></label>
                <div class="layui-input-block">
                    <input type="radio" name="validityType" lay-filter="validityType" lay-verify="required" value="1" title="<fmt:message key='gdje' />" <c:if test="${coupon.validityType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="validityType" lay-filter="validityType" lay-verify="required" value="2" title="<fmt:message key='lqhsy' />" <c:if test="${coupon.validityType eq 2}">checked="checked"</c:if>/>
                </div>
            </div>

            <div class="layui-form-item feijin-validityType-gudin-area" style="display:none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <form:input path="validityBeginDay" class="layui-input" placeholder="<fmt:message key='kssj' />" style="width: 150px;display:inline;"/> -
                    <form:input path="validityEndDay" class="layui-input" placeholder="<fmt:message key='dqsj' />" style="width: 150px;display:inline;"/>
                </div>
            </div>

            <div class="layui-form-item feijin-validityType-tianshu-area" style="display:none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <form:input path="validityDay" class="layui-input" lay-verify="required" placeholder="<fmt:message key='ffsl' />" style="width: 200px;"/>
                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label"><fmt:message key='sysp' /></label>
                <div class="layui-input-block">
                    <input type="radio" name="scopeType" lay-filter="scopeType" lay-verify="required" value="1" title="<fmt:message key='suoysp' />" <c:if test="${coupon.scopeType eq 1}">checked="checked"</c:if>/>
                    <input type="radio" name="scopeType" lay-filter="scopeType" lay-verify="required" value="2" title="<fmt:message key='zdsp' />" <c:if test="${coupon.scopeType eq 2}">checked="checked"</c:if>/>
                </div>
            </div>


            <div class="layui-form-item feijin-shiyong-area" style="display:none;">
                <label class="layui-form-label"></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm">
                        <thead>
                        <tr>
                            <th><fmt:message key='spbh' /></th>
                            <th><fmt:message key='spmc' /></th>
                            <th><fmt:message key='sptp' /></th>
                            <th><fmt:message key='cz' /></th>
                        </tr>
                        </thead>
                        <tbody id="feijin-chooseGoods-table">
                        <c:if test="${empty goodses}">
                            <tr>
                                <td colspan="4">
                                    <center><fmt:message key='zws' /></center>
                                </td>
                            </tr>
                        </c:if>
                        <c:forEach items="${goodses}" var="goods">
                            <tr>
                                <td>${goods.goods.goodsNo}</td>
                                <td>${goods.goods.name}</td>
                                <td><img class="preview" style="width:40px;height:40px;" src="${store_domain}/uploads/${goods.goods.defaultImage}"/></td>
                                <td>
                                    <div class="layui-btn-container">
                                        <a href="javascript:void(0);" data-id="${goods.id}" class="layui-btn layui-btn-xs  layui-btn-danger feijin-kezilai-remove">删除</a>
                                    </div>
                                </td>
                            </tr>
                        </c:forEach>
                        <tr>
                            <td colspan="5">
                                <center><a href="javascript:void(0);" id="chooseGoods" style="color:blue;"><fmt:message key='xzsp' /></a></center>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                </div>
            </div>

            <div class="layui-form-item feijin-zenpin-area" style="display:none;">
                <label class="layui-form-label"><fmt:message key='zp' /></label>
                <div class="layui-input-block">
                    <table class="layui-table" lay-size="sm" id="feijin-sku-table">
                        <thead>
                        <tr>
                            <th><fmt:message key='spbh' /></th>
                            <th><fmt:message key='spmc' /></th>
                            <th><fmt:message key='sptp' /></th>
                            <th><fmt:message key='cz' /></th>
                        </tr>
                        </thead>
                        <tbody id="feijin-complimentaryGoods-table">
                        <c:if test="${null == coupon.complimentaryGoods}">
                            <tr>
                                <td colspan="4">
                                    <center><fmt:message key='zwsj' /></center>
                                </td>
                            </tr>
                        </c:if>
                        <c:if test="${null != coupon.complimentaryGoods}">
                            <tr>
                                <td>${coupon.complimentaryGoods.goodsNo}</td>
                                <td>${coupon.complimentaryGoods.name}</td>
                                <td><img class="preview" style="width:40px;height:40px;" src="${store_domain}/uploads/${coupon.complimentaryGoods.defaultImage}"/></td>
                                <td><a class='delete-line' style='color: red; cursor:pointer;'><fmt:message key='sc' /></a></td>
                            </tr>
                        </c:if>
                        <tr>
                            <td colspan="5">
                                <center><a href="javascript:void(0);" id="chooseComplimentaryGoods" style="color:blue;"><fmt:message key='xzzp' /></a></center>
                            </td>
                        </tr>
                        </tbody>

                    </table>

                </div>
            </div>


            <div class="layui-input-block">
                <div style="display: none">
                    <input type="hidden" name="channelData" id="channelData"/>
                    <input type="hidden" name="goodsesData" id="goodsesData" value="<c:forEach items="${goodses}" var="goods">${goods.goods.id}-</c:forEach>"/>
                    <input type="button" value="<fmt:message key='bc' />" class="layui-btn" id="submit" lay-filter="submit" lay-submit>
                </div>
            </div>

        </form:form>
    </div>
</div>
<script>
    $(function () {

        $(document).on("click", ".delete-line", function () {
            $(this).parent().parent().remove();
        });

        //选择赠品
        $("#chooseComplimentaryGoods").click(function () {
            layer.open({
                type: 2
                , title: '<fmt:message key='xzspsp' />'
                , content: '${web_domain}/merchant/coupon/chooseComplimentaryGoods'
                , maxmin: true
                , area: ['80%', '90%']
                , btn: ['<fmt:message key='qd' />', '<fmt:message key='qx' />']
                , yes: function (index, layero) {

                    var ids = [];
                    layero.find('iframe').contents().find(".feijin-check:radio:checked").each(function (index, item) {
                        var id = $(item).val();
                        ids.push(id);
                    });

                    $.ajax({
                        url: "${web_domain}/merchant/coupon/queryGoodses?ids=" + ids.join(""),
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.status) {
                                var html = "";
                                $(result.goodses).each(function (index, item) {
                                    html += "<tr >";
                                    html += "<td >" + item.goodsNo + "<input type='hidden' name='complimentaryGoods.id' value='" + item.id + "'/></td>";
                                    html += "<td >" + item.name + "</td>";
                                    html += "<td ><img style='width:30px;' src='${store_domain}/uploads/" + item.defaultImage + "' /></td>";
                                    html += "<td><a class='delete-line' style='color: red'><fmt:message key='sc' /></a></td>";
                                    html += "</tr>";
                                });
                                console.log(html);

                                $("#feijin-complimentaryGoods-table").html(html);

                            }
                        }
                    });

                    layer.closeAll();

                }
            });
        });

        //选择适用商品
        $("#chooseGoods").click(function () {
            //获取优惠券分类
            var ids = [];
            $("[name='channels']:checked").each(function (index, item) {
                // console.log(item);
                ids.push($(item).val());
            });
            console.log(ids);


            layer.open({
                type: 2
                , title: '<fmt:message key='xzspsp' />'
                , content: '${web_domain}/merchant/coupon/chooseGoodses?channels=' + ids.join("_")
                , maxmin: true
                , area: ['80%', '90%']
                , btn: ['<fmt:message key='qd' />', '<fmt:message key='qx' />']
                , yes: function (index, layero) {

                    var ids = [];

                    layero.find('iframe').contents().find(".feijin-check:checkbox:checked").each(function (index, item) {
                        var id = $(item).val();
                        ids.push(id);
                    });

                    $("#goodsesData").attr("value", ids.join("-"));

                    $.ajax({
                        url: "${web_domain}/merchant/coupon/queryGoodses?ids=" + ids.join("-"),
                        type: "get",
                        dataType: "json",
                        success: function (result) {
                            if (result.status) {

                                var html = "";

                                $(result.goodses).each(function (index, item) {
                                    html += "<tr >";
                                    html += "<td >" + item.goodsNo + "</td>";
                                    html += "<td >" + item.name + "</td>";
                                    html += "<td ><img style='width:30px;' src='${store_domain}/uploads/" + item.defaultImage + "' /></td>";
                                    html += "<td><a class='delete-line' style='color: red'><fmt:message key='sc' /></a></td>";
                                    html += "</tr>";

                                });

                                $("#feijin-chooseGoods-table").html(html);

                            }
                        }
                    });

                    layer.closeAll();

                }
            });
        });

        var scopeType = $("input[name='scopeType']:checked").val();
        if (scopeType == 1) {
            $(".feijin-shiyong-area").hide();
        }
        if (scopeType == 2) {
            $(".feijin-shiyong-area").show();
        }

        var validityType = $("input[name='validityType']:checked").val();
        if (validityType == 1) {
            $(".feijin-validityType-gudin-area").show();
            $(".feijin-validityType-tianshu-area").hide();
        }
        if (validityType == 2) {
            $(".feijin-validityType-gudin-area").hide();
            $(".feijin-validityType-tianshu-area").show();
        }


        var type = $("input[name='type']:checked").val();
        if (type == 1) {
            $(".feijin-zenpin-area").hide();
            $(".feijin-manjian-area").show();
        }

        if (type == 2) {
            $(".feijin-zenpin-area").show();
            $(".feijin-manjian-area").hide();
        }

        layui.use(['form', 'laydate'], function () {

            var form = layui.form;
            var laydate = layui.laydate;

            laydate.render({
                elem: '#validityBeginDay'
            });

            laydate.render({
                elem: '#validityEndDay'
            });

            //赠品
            form.on('radio(scopeType)', function (data) {
                var id = data.value;

                if (id == 1) {
                    $(".feijin-shiyong-area").hide();
                }

                if (id == 2) {
                    $(".feijin-shiyong-area").show();
                }

            });

            //优惠券有效期
            form.on('radio(validityType)', function (data) {
                var id = data.value;

                if (id == 1) {
                    $(".feijin-validityType-gudin-area").show();
                    $(".feijin-validityType-tianshu-area").hide();
                }
                if (id == 2) {
                    $(".feijin-validityType-gudin-area").hide();
                    $(".feijin-validityType-tianshu-area").show();
                }
            });

            //优惠券类型
            form.on('radio(type)', function (data) {
                var id = data.value;

                if (id == 1) {
                    $(".feijin-zenpin-area").hide();
                    $(".feijin-manjian-area").show();
                }

                if (id == 2) {
                    $(".feijin-zenpin-area").show();
                    $(".feijin-manjian-area").hide();
                }

            });

            form.on('submit(submit)', function (data) {

                var goodsChannels = [];
                $("input[name='channels']:checked").each(function (index, item) {
                    goodsChannels.push($(item).val());
                });

                if (goodsChannels.length == 0) {
                    layui.use('layer', function () {
                        layer.msg("<fmt:message key='qxzjylm' />");
                    });

                    return false;
                }

                $("#channelData").attr("value", goodsChannels.join("-"));

                $("#form").ajaxSubmit({
                    success: function (result) {
                        if (result.status) {
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            parent.$("#search").click();
                        } else {
                            layui.use('layer', function () {
                                layer.msg(result.message);
                            });
                        }
                    }
                });
            });

        });

    });
</script>
</body>
</fmt:bundle>
</html>